<template>
  <div class="question-colum">
    <div v-if="columConfig.type == TABLE_SHOW_TYPE.TXT" class="question-txt">
      {{ scope.row[columConfig.prop] }}
    </div>
    <div v-if="columConfig.type == TABLE_SHOW_TYPE.STATE" class="question-txt">
      <div class="decorate" :style="{background: stateColor}"></div>
      <div class="txt" :style="{color: stateColor}">
        {{ scope.row[columConfig.prop] }}
      </div>
    </div>
    <div v-if="columConfig.type == TABLE_SHOW_TYPE.SCHEDULE" class="question-txt">
      <el-progress :percentage="parseInt( scope.row[columConfig.prop])"
                   :color="getColor( scope.row[columConfig.prop])" :format="format"></el-progress>
    </div>
  </div>
</template>

<script>
import {COLOR_CONFIG, TABLE_SHOW_TYPE} from "@/constantData";
import {isArr} from "@/utils/arrayUtil";

export default {
  props: {
    scope: {
      type: Object
    },
    columConfig: {
      type: Object
    }
  },
  data() {
    return {
      TABLE_SHOW_TYPE
    }
  },
  computed: {
    stateColor() {
      let {scope: {row}, columConfig: {propValue, colorList}} = this
      if (!isArr(colorList)) return '';
      let colorItem = colorList.find(item => item.values.some(value => value == row[propValue]));
      return colorItem?.color
    }
  },
  methods: {
    format(percentage) {
      return `${percentage}%`
    },
    getColor(num) {
      num = parseInt(num)
      if (num > 80) {
        return COLOR_CONFIG.GREEN
      }

      if (num > 60) {
        return COLOR_CONFIG.ORANGE
      }

      return COLOR_CONFIG.RED
    }
  }
}
</script>

<style lang="scss" scoped>
.question-txt {
  display: flex;
  align-items: center;
  width: 100%;
  .decorate {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 10px;
  }

  .txt {
  }
}
</style>
